<template>
	<view :class="bodyClass" :style="[bodyStyle]">
		<view class="e-p-l-20 e-p-r-20 bg-white overflow-hidd" :style="[boxStyle]">
			<view class="e-p-t-30 e-p-b-30 e-flex e-flex-between">
				<text class="e-font-30 fw-500">{{ $t('layout.用户评价') }}({{ evaluateCount }})</text>
				<view class="e-flex" @tap="$goTo(`/pages/classify/goods/evaluation`,  { id: goodsId })">
					<text class="c-secondary e-m-r-8">{{ $t('layout.查看全部评价') }}</text>
					<view class="arrow"></view>
				</view>
			</view>
			<view class="e-p-t-30" v-if="evaluateList.length">
				<view class="e-m-b-40" v-for="(item, index) in evaluateList" :key="item.id">
					<evaluationItem :info="item"></evaluationItem>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from '@/components/list/hooks'
	import { getGoodsEvaluateList} from '@/common/request/api'
	import type { GoodsEvaluateItem} from '@/common/request/api'
	import evaluationItem from '../../child/evaluationItem.vue'

	const props = withDefaults(defineProps<{
		goodsId : string,
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			// 显示的评论数量
			evaluationCount: number
			// 边距
			paddingTop: number
			paddingBottom: number
			paddingX: number
			// 圆角
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			evaluationCount: 1,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,

		})
	})


	const ctx = useCurrentInstance()

	const { viewStyle:bodyStyle,bodyClass,bodyBoxStyle:boxStyle } = useLayoutCompoments(ctx, props.option)

	
	const evaluateList = ref<GoodsEvaluateItem[]>([])
	const evaluateCount = ref(0)
	
	getGoodsEvaluateList({ productId: props.goodsId, pageNum: 1, pageSize: props.option.evaluationCount }).then(res => {
		evaluateList.value = res.rows
		evaluateCount.value = res.total
	})

</script>
<style lang="scss">
@import '@/components/list/css/layoutCommon.scss';
</style>
<style lang="scss" scoped>
.arrow {
	width: 0;
	height: 0;
	border: solid $base-color-text-regular;
	border-width: 0 3rpx 3rpx 0;
	padding: 6rpx;
	transform: translateY(1rpx) rotate(-45deg);
}

</style>
